<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/include/taglibs.jsp"%>
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 700px; }
  #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 80px; height: 40px; font-size: 1em; text-align: center; }
  </style>
  <style>
/*   #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } */
/*   #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } */
/*   #sortable li span { position: absolute; margin-left: -1.3em; } */
  
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ url(images/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999/*{borderColorHover}*/; background: #dadada/*{bgColorHover}*/ url(images/ui-bg_glass_75_dadada_1x400.png)/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121/*{fcHover}*/; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; text-decoration: none; }
.ui-widget :active { outline: none; }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1/*{borderColorHighlight}*/; background: #fbf9ee/*{bgColorHighlight}*/ url(images/ui-bg_glass_55_fbf9ee_1x400.png)/*{bgImgUrlHighlight}*/ 50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/; color: #363636/*{fcHighlight}*/; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636/*{fcHighlight}*/; }
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a/*{borderColorError}*/; background: #fef1ec/*{bgColorError}*/ url(images/ui-bg_glass_95_fef1ec_1x400.png)/*{bgImgUrlError}*/ 50%/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/; color: #cd0a0a/*{fcError}*/; }
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a/*{fcError}*/; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a/*{fcError}*/; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }

/* Icons
----------------------------------*/

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(/pmgr/css/jquery/themes/base/images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-widget-content .ui-icon {background-image: url(/pmgr/css/jquery/themes/base/images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-widget-header .ui-icon {background-image: url(/pmgr/css/jquery/themes/base/images/ui-icons_222222_256x240.png)/*{iconsHeader}*/; }
.ui-state-default .ui-icon { background-image: url(/pmgr/css/jquery/themes/base/images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; }
  </style>
<script type="text/javascript">

$(document).ready(function(){
	<c:if test="${param.returnCd=='0000' }">alert('수정했습니다');</c:if>
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});


//사이트명 저장
function setOrder(){
	if(confirm("저장하시겠습니까?")){
// 		location.href="./petc0110T.do?p_id=${map.p_id}&pr_no="+pr_no+"&room_nm="+$("#"+nm).val();
		
		var html = "";
		$("input[name='pr_no']").each(function (){
			html+="<input name='pr_nos' type='text' value='"+$(this).val()+"'/>";
		});
		html+="<input name='p_id' type='text' value='${map.p_id}'/>";
		$("#frmData").html(html);
		$("#frmData").submit();
	}
}

</script>
<%@ include file="/WEB-INF/jsp/pmgr/pe/ti/page_top.jsp"%>
<script type="text/javascript" src="/js/jquery-ui-1.8.17.custom.min.js" charset="UTF-8"></script>
<script src="/pmgr/css/jquery/themes/ui-lightness/jquery-ui-1.8.16.custom.css"></script>
<script src="/pmgr/css/jquery/themes/base/jquery.ui.all.css"></script>
<script src="/pmgr/css/jquery/themes/base/jquery.ui.theme.css"></script>


<form id="frmData" action="./petc0115T.do" method="post" class="hide">

</form>

순서를 마우스로 이동해주세요

<ul id="sortable">
	<c:if test="${list !=null && fn:length(list)>0 }">
		<c:forEach var="map" items="${list}" varStatus="status">
			<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>${map.room_nm }(${status.count })
				<input name="pr_no" type="hidden" value="${map.pr_no}">
			</li>
		</c:forEach>
	</c:if>
</ul>



<table width="700" border="0"  cellspacing="1" cellpadding="2" class="class_admin_table_nocolor" style="clear: both;">
<tr> 
	<td height="25"  align="center">
	<INPUT TYPE="button" onclick="setOrder();" value="저장 "> 
	</td>
</tr>
</table>	

